import './index.scss'
import {Button, Form, Input, Picker, View} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useContext, useEffect} from 'react'
import Taro, {useDidHide, useDidShow, useRouter} from '@tarojs/taro'
import {beSharedBaseInfoEditStore} from './model'

const Baseinfoedit = () => {
  let router = useRouter()
  const {updatePageQuery, updatePageDataSource, devName, address, provinces} =
    useContext(beSharedBaseInfoEditStore)

  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('beSharedBaseinfoedit useEffect')
  })
  // 对应 onShow
  useDidShow(() => {
    console.log('beSharedBaseinfoedit useDidShow')
    updatePageQuery(router.params)
    updatePageDataSource()
  })

  // 对应 onHide
  useDidHide(() => {
    console.log('beSharedBaseinfoedit useDidHide')
  })
  return (
    <View className="container px-16">
      <Form
        onSubmit={e => {
          console.log(e)
        }}
      >
        <View className="hanzi mt-24 text-16 font-medium">设备名称</View>
        <View className="h-42 px-10 mt-10 bg-white rounded-4 overflow-hidden">
          <Input
            name="devName"
            value={devName}
            className="h-full"
            placeholder="请输入设备名称"
            disabled={true}
            placeholderStyle="color:#bfbfbf"
          ></Input>
        </View>

        <View className="hanzi mt-34 text-16 font-medium">省市区</View>
        <View className="h-42 leading-42 px-10 mt-10 bg-white rounded-4 overflow-hidden">
          <Input
            value={provinces.join('-')}
            className="w-full h-full"
            placeholder="暂无省市区信息"
            placeholderStyle="color:#bfbfbf"
            disabled={true}
          ></Input>
        </View>

        <View className="hanzi mt-34 text-16 font-medium">设备地址</View>
        <View className="h-42 px-10 mt-10 bg-white rounded-4 overflow-hidden">
          <Input
            name="address"
            value={address}
            className="h-full"
            placeholder="暂无设备地址"
            placeholderStyle="color:#bfbfbf"
            disabled={true}
          ></Input>
        </View>
      </Form>
    </View>
  )
}
export default observer(Baseinfoedit)
